import {CategoryList} from './CategoryList';
import React from 'react';
import styled from 'styled-components';
import {Category} from '../hooks/useTags';

const Label = styled.label`
  display: flex;
  align-items: center;
  padding: 10px 16px;
  line-height: 20px;

  > span {
    margin-right: 16px;
    white-space: nowrap;
  }

  > ol {
    > li {
      display: inline-block;
      border-radius: 16px;
      background: #f1f1f3;
      color: #c1c2c4;
      padding: 2px 16px;
      margin-right: 12px;
    }
  }
`;
type Props = {
  value: Category
  onClick: (newValue: Category) => void
}

const CategorySelector: React.FC<Props> = (props) => {
  return (
    <Label>
      <span>类别</span>
      <CategoryList value={props.value} onClick={props.onClick}/>
    </Label>
  );
};

export {CategorySelector};
